<template>
    <div style="display: flex; padding: 10px;">
        <div style="margin-right: 10px"><el-switch v-model="configData.horizontal" size="large"></el-switch> 横向</div>
        <div style="margin-right: 10px"><el-switch v-model="configData.collapsable" size="large"></el-switch> 可收起</div>
        <div style="margin-right: 10px;margin-top:1px">背景色：<el-color-picker
                v-model="style.background"></el-color-picker></div>
        <div style="margin-right: 10px;;margin-top:1px">文字颜色：<el-color-picker v-model="style.color"></el-color-picker>
        </div>
    </div>
    <div style="height: 90%;">
        <vue3-tree-org ref="treeOrg" :data="data" center :disabled="configData.disabled" :default-expand-level="1"
            :horizontal="configData.horizontal" :collapsable="configData.collapsable" :label-style="style"
            :only-one-node="configData.onlyOneNode" :clone-node-drag="configData.cloneNodeDrag"
            :before-drag-end="beforeDragEnd" :define-menus="defineMenus" @on-node-drag-end="nodeDragEnd"
            :node-add="nodeAdd" :node-edit="nodeEdit" :node-delete="nodeDelete" @on-contextmenu="onMenus"
            @on-expand="onExpand" @on-node-dblclick="onNodeDblclick" @on-node-click="onNodeClick" />
    </div>
    <div class="dialog"></div>
</template>
<script setup>
import { ElSwitch, ElColorPicker, ElMessage, ElMessageBox ,ElNotification} from 'element-plus'
import { ref, onMounted, getCurrentInstance, createVNode, render } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Api from '@/api/model/system'
import tsLayer from '@/utils/useDialog'
const instance = getCurrentInstance()
const route = useRoute();
const data = ref({ id: 0, label: '', children: [] })
const configData = ref({})
const treeOrg = ref(null)
const fileName = ref()
const style = ref({
background: "#fff",
color: "#5e6d82",
})
const menus = ref([])
onMounted(() => {
if (route.query.fileName) {
    fileName.value = route.query.fileName
}
getData()
})
const defineMenus = (e, node) => {
if (node.$$data.nodeType == '0') {
    return []
} else {
    return menus.value
}
}
const getData = async () => {
var params = {
    fileName: fileName.value,
    // fieldMap:{
    //     id: route.query.id
    // }
}
let res = await Api.select.query.post(params)
if (res.code == '200') {
    configData.value = res.data
    data.value = res.reportData[0]
    menus.value = res.bean.toolbarGroup.toolbars
}
}
const onMenus = ({ node, command }) => {
console.log(node, command);
}
const onExpand = (e, data) => {
console.log(e, data);
}
const beforeDragEnd = (node, targetNode) => {
return new Promise((resolve, reject) => {
    if (targetNode == null || targetNode == node) {
        reject()
    }
    else {
        ElMessageBox.confirm('是否确定拖拽修改', '拖拽', {
            type: 'info',
            closeOnClickModal: false,
            center: true,
        }).then(() => {
            resolve()
        }).catch(() => {
            reject()
        })
    }
})

}
const nodeDragEnd = (data, isSelf) => {
console.log(data, isSelf);
}
const onNodeDblclick = () => {
console.log('onNodeDblclick')
}
const onNodeClick = (e, data) => {
ElMessage.info(data.label);
}
const nodeAdd = (node) => {
let option = menus.value[menus.value.findIndex(item => item.command == 'add')]
let paramsData = {
    parentId: node.pid,
    id: node.id
}
openDialog(option,paramsData)
}
const nodeEdit = (node) => {
let option = menus.value[menus.value.findIndex(item => item.command == 'edit')]
let paramsData = {
    parentId: node.pid,
    id: node.id
}
openDialog(option, paramsData)
}
const nodeDelete = (node) => {
let option = menus.value[menus.value.findIndex(item => item.command == 'edit')]
ElMessageBox.confirm(node.promptStatement, '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    confirmButtonClass: 'el-button--danger'
}).then(() => {
    confirmDelClick(option.url, node.id)
}).catch(() => { })
}
const openDialog = (option, paramsData) => {
const box = document.querySelector(".dialog")
render(null, box)
import(`@/views${option.url}`).then((res) => {
    const form = createVNode(res.default, {
        paramsData,
        onUpdatetable(val) {
            render(null, box)
            if (val == true) {
                getData()
            }
        }
    })
    tsLayer.open({
        title: option.title,
        width: option.width,
        fullscreen: option.fullscreen,
        appContext: instance.appContext,
        box: box,
        content: form
    })
})

}
const confirmDelClick = async (url, id) => {
const res = await Api.systemDelete.post(url, id);
if (res.code == 200) {
    ElNotification.success({ title: '', message: '成功！', duration: 2000 });
    getData();
}
else {
    ElNotification.error({ title: '失败', message: res.msg });
}
}

</script>
